<template>
  <div class="chat-message-item">
    <div :class="`message ${type === '5' ? '' : 'messageBg'}`">
      <!-- 英语角色选择 -->
      <RoleSelector v-if="type === '4'" :hearingRoleList="hearingRoleList" @confirm="roleConfirm" />
      <!-- 音频播放和控制组件 -->
      <PlaybackPanel v-if="props.type === '2'" />
      <!-- 英语批改 -->
      <AICorrection v-if="props.type === '3'" />
      <!-- 消消乐 -->
      <AIGame v-if="type === '1'" :answer="answer" />
      <!-- AI出题 -->
      <!-- {{ type }} -->
      <!-- [{{ answer }}] -->
      <AIQuestions v-if="type === '5'" :questions="answer" />
      <!-- 英语听力意图判断 -->
      <listenStatus v-if="type === '6'" :listenCode="listenCode" @listenConfirm="listenConfirm" />
    </div>
  </div>
</template>

<script setup lang="ts">
import { onMounted } from 'vue';
import AICorrection from './types/AICorrection.vue';
import AIGame from './types/AIGame.vue';
import AIQuestions from './types/AIQuestions.vue';
import PlaybackPanel from './types/PlaybackPanel.vue';
import RoleSelector from './types/RoleSelector.vue';
import listenStatus from './types/listenStatus.vue';

const emit = defineEmits(['roleConfirm', 'listenConfirm']);

const props = defineProps({
  item: {
    type: Object,
  },
  isUser: {
    type: Boolean,
  },
  type: {
    type: String,
  },
  answer: {
    type: String,
    default: () => '[]' as any,
  },
  hearingRoleList: {
    type: Array,
  },
  listenCode: {
    type: Number,
  },
});

const userAvatar = '/images/user-avatar.png'; // 可替换成你的路径
const botAvatar = '/images/bot-avatar.png';

const roleConfirm = (list: any) => {
  console.log('roleConfirm', list);
  emit('roleConfirm', list);
};

const listenConfirm = (type: Boolean) => {
  emit('listenConfirm', type);
};
</script>

<style scoped>
.chat-message-item {
  display: flex;
}

.chat-message-item.from-user {
  flex-direction: row-reverse;
}

.content {
  max-width: 70%;
}

.name {
  font-weight: bold;
  margin-bottom: 4px;
}

.message {
  padding: 10px;
  border-radius: 8px;
  white-space: pre-wrap;
}

.messageBg {
  background: #ffffff;
  border: 1px solid #eeeeee;
}
</style>
